<template>
    <div class="item" @click="$router.push({ name:'detail',query:{ id:source.id } })">{{ index }} - {{ source.name }}</div>
  </template>
  
  <script>
    export default {
      name: 'item-component',
      props: {
        index: { // index of current item
          type: Number
        },
        source: { // here is: {uid: 'unique_1', text: 'abc'}
          type: Object,
          default () {
            return {}
          }
        }
      }
    }
  </script>
  <style scoped lang="scss">
.item{
    line-height: 55px;
    border-bottom: 1px solid red;
}
</style>